<script setup>
import { onMounted } from 'vue';
import CommonAside from '../components/CommonAside.vue';
import CommonHeader from '../components/CommonHeader.vue';
import CommonMain from '../components/CommonMain.vue';
import CommonFooter from '../components/CommonFooter.vue';
import { useWebSocketStore } from "../stores/websocket";
import { useUserStore } from "../stores/user";
import { useRouter } from "vue-router";

onMounted(() => {
    const userStore = useUserStore();
    if (userStore.state.token){
        const websocketStore = useWebSocketStore();
        websocketStore.connect(userStore.state.token);
    } else{
        const router = useRouter();
        router.push('/login');
    }
})
</script>

<template>
    <div class="common-layout">
        <el-container class="lay-container">
            <common-aside />
            <el-container>
                <el-header>
                    <common-header></common-header>
                </el-header>
                <el-main class="right-main">
                    <common-main></common-main>
                </el-main>
                <el-footer class="right-footer">
                    <common-footer></common-footer>
                </el-footer>
            </el-container>
        </el-container>
    </div>

</template>

<style scoped lang="less">
.common-layout,
.lay-container {
    height: 100%;
}
    
.el-header {
    background-color: black;
}

.right-main{
    background-color: black;
    color: #fff;
    overflow: hidden;
}
.right-footer{
    background-color: black;
    color: #fff;
    height: 20%;
}
</style>
